<template>
  <section>
    <div>
      <grid-layout
        ref="gridLayoutRef"
        :layout.sync="layout"
        :col-num="colNum"
        :row-height="200"
        :is-draggable="true"
        :is-resizable="true"
        :vertical-compact="true"
        :use-css-transforms="true"
        :margin="[24, 24]"
      >
        <grid-item
          v-for="(item, index) in layout"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :key="item.i"
          @resized="resizeEvent(index)"
        >
          <div class="padding">
            <Chart
              ref="gridChart"
              :id="item.i"
              :full-options="item.chartConfig"
              :full-data="item.chartData"
            />
          </div>
        </grid-item>
      </grid-layout>
      <t-button
        block
        variant="dashed"
        size="large"
        class="add-layout-btn margin-top-xs"
        @click="addLayoutMoudle"
      >
        <template #icon>
          <component is="AddCircleIcon" />
        </template>
        点击此处新增页面布局
      </t-button>
    </div>
  </section>
</template>
<script lang="tsx" setup>
import { ref, nextTick, onMounted } from 'vue';
import Chart from '@/components/Chart/index.vue';
let layout = ref<{ [key: string]: any }[]>([]);
const colNum = 24;
onMounted(() => {
  nextTick(() => {
    getLayoutData();
  });
});
const getLayoutData = () => {
  layout.value = [
    {
      i: 'y17nghy',
      x: 0,
      y: 0,
      w: 8,
      h: 2,
      chartConfig: {
        currentChartType: 'column',
        chartTitle: {
          show: false,
          text: '',
        },
        chartTips: {
          show: false,
          text: '',
        },
        chartOption: {
          backgroundColor: '',
          series: {
            label: {
              show: false,
              style: {
                number: false,
                percent: false,
              },
            },
            radarAreaStyle: 'line',
            smooth: false,
          },
          legend: {
            show: true,
            orient: 'horizontal',
            position: 'bottom',
          },
          dataZoom: {
            show: false,
          },
          xAxis: {
            name: '',
            axisLabel: {
              rotate: 0,
            },
          },
          yAxis: {
            name: '',
            max: '',
            min: '',
            inverse: false,
          },
        },
        style: {
          background: {
            show: false,
            fillType: 'color',
            color: '',
          },
        },
        chartBorder: {
          width: '',
          color: '#E7E7E7',
        },
        index: {
          size: {
            label: '',
            number: '',
          },
          color: {
            label: '',
            number: '',
          },
        },
      },
      chartData: {
        x_data: ['豹子', '狮子', '大象', '老虎'],
        lists: [
          {
            name: '指标A',
            豹子: 55,
            狮子: 66,
            大象: 77,
            老虎: 88,
          },
          {
            name: '指标B',
            豹子: 44,
            狮子: 55,
            大象: 66,
            老虎: 77,
          },
        ],
      },
    },
    {
      i: '2ovgmws',
      x: 8,
      y: 0,
      w: 8,
      h: 2,
      chartConfig: {
        currentChartType: 'wordCloud',
        chartTitle: {
          show: false,
          text: '',
        },
        chartTips: {
          show: false,
          text: '',
        },
        chartOption: {
          backgroundColor: '',
          series: {
            label: {
              show: false,
              style: {
                number: false,
                percent: false,
              },
            },
            radarAreaStyle: 'line',
            smooth: false,
          },
          legend: {
            show: true,
            orient: 'horizontal',
            position: 'bottom',
          },
          dataZoom: {
            show: false,
          },
          xAxis: {
            name: '',
            axisLabel: {
              rotate: 0,
            },
          },
          yAxis: {
            name: '',
            max: '',
            min: '',
            inverse: false,
          },
        },
        style: {
          background: {
            show: false,
            fillType: 'color',
            color: '',
          },
        },
        chartBorder: {
          width: '',
          color: '#E7E7E7',
        },
        index: {
          size: {
            label: '',
            number: '',
          },
          color: {
            label: '',
            number: '',
          },
        },
      },
      chartData: {
        x_data: ['豹子', '狮子', '大象', '老虎'],
        lists: [
          {
            name: '指标A',
            豹子: 55,
            狮子: 66,
            大象: 77,
            老虎: 88,
          },
          {
            name: '指标B',
            豹子: 44,
            狮子: 55,
            大象: 66,
            老虎: 77,
          },
        ],
      },
    },
    {
      i: '8kzrh10',
      x: 16,
      y: 0,
      w: 8,
      h: 2,
      chartConfig: {
        currentChartType: 'pie',
        chartTitle: {
          show: false,
          text: '',
        },
        chartTips: {
          show: false,
          text: '',
        },
        chartOption: {
          backgroundColor: '',
          series: {
            label: {
              show: false,
              style: {
                number: false,
                percent: false,
              },
            },
            radarAreaStyle: 'line',
            smooth: false,
          },
          legend: {
            show: true,
            orient: 'horizontal',
            position: 'top',
          },
          dataZoom: {
            show: false,
          },
          xAxis: {
            name: '',
            axisLabel: {
              rotate: 0,
            },
          },
          yAxis: {
            name: '',
            max: '',
            min: '',
            inverse: false,
          },
        },
        style: {
          background: {
            show: false,
            fillType: 'color',
            color: '',
          },
        },
        chartBorder: {
          width: '',
          color: '#E7E7E7',
        },
        index: {
          size: {
            label: '',
            number: '',
          },
          color: {
            label: '',
            number: '',
          },
        },
      },
      chartData: {
        x_data: ['豹子', '狮子', '大象', '老虎'],
        lists: [
          {
            name: '指标A',
            豹子: 55,
            狮子: 66,
            大象: 77,
            老虎: 88,
          },
          {
            name: '指标B',
            豹子: 44,
            狮子: 55,
            大象: 66,
            老虎: 77,
          },
        ],
      },
    },
  ];
};
//添加模块
const gridLayoutRef = ref();
const addLayoutMoudle = () => {
  layout.value.push({
    i: Math.random().toString(36).substring(3, 10),
    x: 0,
    y: layout.value.length,
    w: colNum,
    h: 1,
  });
  console.log(layout.value);
  gridLayoutRef.value.layoutUpdate();
};

const gridChart = ref();
const resizeEvent = (index: number) => {
  gridChart.value[index].resizeHandler();
};
</script>
<style lang="scss" scoped>
.add-layout-btn {
  height: 64px;

  @include themeify {
    border-color: #c9cdd6;
    color: themed('placeholder_color');
    background-color: transparent;
  }
}

.vue-grid-layout {
  margin-left: -24px;
  margin-right: -24px;
}

.vue-grid-item {
  @include background_color('page_bg_color');
  padding: 16px;
}

.card-line {
  @include border(solid, 'border_color');
}
</style>
